<template>
    <div v-if="proxy.isAuth(['ROOT', 'DEPT:SELECT'])">
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
            <el-form-item prop="deptName">
                <el-input v-model="dataForm.deptName" placeholder="部门名称" maxlength="10" class="input"
                    clearable="clearable" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandle()">查询</el-button>
                <el-button type="primary" :disabled="!proxy.isAuth(['ROOT', 'DEPT:INSERT'])" @click="addHandle()">
                    新增
                </el-button>
                <el-button type="danger" :disabled="!proxy.isAuth(['ROOT', 'DEPT:DELETE'])" @click="deleteHandle()">
                    批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.dataList" :header-cell-style="{ 'background': '#f5f7fa' }" border v-loading="data.loading"
            @selection-change="selectionChangeHandle">
            <el-table-column type="selection" :selectable="selectable" header-align="center" align="center" width="50"
                fixed />
            <el-table-column type="index" header-align="center" align="center" width="120" label="序号" fixed>
                <template #default="scope">
                    <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="deptName" header-align="center" align="center" label="部门名称" min-width="170" fixed />
            <el-table-column prop="tel" header-align="center" align="center" label="联系电话" width="170" />
            <el-table-column prop="email" header-align="center" align="center" label="邮箱" width="270" />
            <el-table-column header-align="center" align="center" label="员工数量" width="140">
                <template #default="scope">
                    <span>{{ scope.row.emps }}人</span>
                </template>
            </el-table-column>
            <el-table-column prop="desc" header-align="center" align="center" label="备注" min-width="350" />
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template #default="scope">
                    <el-button type="text" :disabled="!proxy.isAuth(['ROOT', 'DEPT:UPDATE'])"
                        @click="updateHandle(scope.row.id)">
                        修改
                    </el-button>
                    <el-button type="text" :disabled="!proxy.isAuth(['ROOT', 'DEPT:DELETE']) || scope.row.emps > 0"
                        @click="deleteHandle(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
            :current-page="data.pageIndex" :page-sizes="[10, 20, 50]" :page-size="data.pageSize"
            :total="data.totalCount" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>

    <el-dialog :title="!dialog.dataForm.id ? '新增' : '修改'" v-if="proxy.isAuth(['ROOT', 'DEPT:INSERT', 'DEPT:UPDATE'])"
        :close-on-click-modal="false" v-model="dialog.visible" width="360px">
        <el-form :model="dialog.dataForm" ref="dialogForm" :rules="dialog.dataRule" label-width="60px">
            <el-form-item label="部门" prop="deptName">
                <el-input v-model="dialog.dataForm.deptName" maxlength="10" clearable />
            </el-form-item>
            <el-form-item label="电话" prop="tel">
                <el-input v-model="dialog.dataForm.tel" maxlength="11" clearable />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="dialog.dataForm.email" maxlength="200" clearable />
            </el-form-item>
            <el-form-item label="备注" prop="desc">
                <el-input v-model="dialog.dataForm.desc" maxlength="20" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialog.visible = false">取消</el-button>
                <el-button type="primary" @click="dataFormSubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;

const dataForm = reactive({
    deptName: null
});

const dataRule = reactive({
    deptName: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '部门名称格式错误' }]
});

const data = reactive({
    dataList: [],
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    loading: false,
    selections: [] as DeptItem[]
});

interface DeptFormData {
    id: number | null;
    deptName: string;
    tel: string | null;
    email: string | null;
    desc: string | null;
}
interface DeptItem {
    id: number;
    deptName: string;
    emps?: number;
    tel?: string;
    email?: string;
    desc?: string;
    [key: string]: any;
}

interface ApiResponse {
    result?: any;
    list?: any;
    page?: any;
    rows?: number;
    message?: string;
    code?: number;
}
const dialog = reactive({
    visible: false,
    dataForm: {
        id: null,
        deptName: '',
        tel: '',
        email: '',
        desc: ''
    } as DeptFormData,
    dataRule: {
        deptName: [{ required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$', message: '部门名称格式错误' }],
        tel: [
            {
                required: false,
                pattern: '^1[1-9]\\d{9}$|^(0\\d{2,3}\-){0,1}[1-9]\\d{6,7}$',
                message: '电话格式错误'
            }
        ],
        email: [
            {
                required: false,
                pattern: '^([a-zA-Z]|[0-9])(\\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$',
                message: '邮箱格式错误'
            }
        ]
    } 
});

//加载部门数据
function loadDataList() {
    data.loading = true;
    let json = {
        deptName: dataForm.deptName,
        page: data.pageIndex,
        length: data.pageSize
    };

    proxy.$http('/mis/dept/searchByPage', 'POST', json, true, function (resp: ApiResponse) {
        let page = resp.page;
        data.dataList = page.list;
        data.totalCount = page.totalCount;
        data.loading = false;
    });
}

//部门查询
function searchHandle() {
    proxy.$refs['form'].validate((valid: boolean) => {
        if (valid) {
            proxy.$refs['form'].clearValidate();
            if (dataForm.deptName == '') {
                dataForm.deptName = null;
            }
            if (data.pageIndex != 1) {
                data.pageIndex = 1;
            }
            loadDataList();
        } else {
            return false;
        }
    });
}

//添加
function addHandle() {
    dialog.dataForm.id = null;
    dialog.visible = true;
    proxy.$nextTick(() => {
        proxy.$refs['dialogForm'].resetFields();
    });
}

//提交
function dataFormSubmit() {
    proxy.$refs['dialogForm'].validate((valid: boolean) => {
        if (valid) {
            proxy.$http(
                `/mis/dept/${dialog.dataForm.id == null ? 'insert' : 'update'}`,
                'POST',
                dialog.dataForm,
                true,
                function (resp: ApiResponse) {
                    if (resp.rows == 1) {
                        proxy.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1200,
                            onClose: () => {
                                dialog.visible = false;
                                loadDataList();
                            }
                        });

                    } else {
                        proxy.$message({
                            message: '操作失败',
                            type: 'error',
                            duration: 1200
                        });
                    }
                }
            );
        }
    });
}

//修改处理
function updateHandle(id: number) {
    dialog.dataForm.id = id;
    dialog.visible = true;
    proxy.$nextTick(() => {
        proxy.$refs['dialogForm'].resetFields();
        let json = { id: id };
        proxy.$http('/mis/dept/searchById', 'POST', json, true, function (resp: ApiResponse) {
            let result = resp.result;
            dialog.dataForm.deptName = result.deptName;
            dialog.dataForm.tel = result.tel;
            dialog.dataForm.email = result.email;
            dialog.dataForm.desc = result.desc;
        });
    });
}

//禁止选中有员工的部门
function selectable(row: DeptItem, index: number) {
    if (row.emps != undefined && row.emps > 0) {
        return false;
    }
    return true;
}
function selectionChangeHandle(val: DeptItem[]) {
    data.selections = val;
}
//删除
function deleteHandle(id?: number) {
    let ids = id
        ? [id]
        : data.selections.map(item => {
            return item.id;
        });
    if (ids.length == 0) {
        proxy.$message({
            message: '没有选中记录',
            type: 'warning',
            duration: 1200
        });
    } else {
        proxy.$confirm(`确定要删除选中的记录？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let json = { ids: ids };
            proxy.$http('/mis/dept/deleteByIds', 'POST', json, true, function (resp: ApiResponse) {
                if (resp.rows != undefined && resp.rows > 0) {
                    proxy.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200,
                        onClose: () => {
                            loadDataList();
                        }
                    });
                } else {
                    proxy.$message({
                        message: '未能删除记录',
                        type: 'warning',
                        duration: 1200
                    });
                }
            });
        });
    }
}

function sizeChangeHandle(val: number) {
    data.pageSize = val;
    data.pageIndex = 1;
    loadDataList();
}

function currentChangeHandle(val: number) {
    data.pageIndex = val;
    loadDataList();
}


loadDataList();


</script>

<style scoped>
.dept-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100%;
    box-sizing: border-box;
}

h2 {
    margin-bottom: 20px;
    color: #303133;
    font-size: 24px;
    font-weight: 500;
}

.dept-content {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-table {
    margin-top: 15px;
}

.el-button--text {
    margin-right: 10px;
}
</style>